<template>
  <el-row>
    <el-col :span="24">
      <vxe-toolbar setting>
        <template v-slot:buttons>
          <el-button @click="saveUser">保存</el-button>
        </template>
      </vxe-toolbar>
      <vxe-table ref="xTable" class="vxe-table-element" border auto-resize show-overflow row-id="userId" :loading="loading" :start-index="(tablePage.currentPage - 1) * tablePage.pageSize" :select-config="{reserve: true}" :data.sync="tableData">
        <vxe-table-column type="selection" width="50"></vxe-table-column>
        <vxe-table-column type="index" width="50"></vxe-table-column>
        <vxe-table-column field="userId" title="用户ID"></vxe-table-column>
        <vxe-table-column field="loginName" title="登录名称"></vxe-table-column>
        <vxe-table-column field="userName" title="用户名称"></vxe-table-column>
        <vxe-table-column field="deptName" title="部门"></vxe-table-column>
        <vxe-table-column field="email" title="邮箱"></vxe-table-column>
        <vxe-table-column field="phonenumber" title="手机"></vxe-table-column>
      </vxe-table>
      <vxe-pager :loading="loading" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize" :total="tablePage.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
      </vxe-pager>
    </el-col>
  </el-row>
</template>
<script>
import { mapState, mapActions, mapGetters } from "vuex";
import Message from "../../common/Message";
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0
      }
    };
  },
  computed: {
    ...mapGetters("http", ["users"])
  },
  watch: {
    users: {
      deep: true,
      handler(val, oldVal) {
        this.loadUsersTable();
      }
    }
  },
  methods: {
    ...mapActions("http", ["loadUsers", "getUsers"]),
    ...mapActions(["addSelectedUsers"]),
    loadUsersTable() {
      let users = this.$store.state.http.users;
      let tableData = [];
      users.forEach(e => {
        tableData.push(e);
      });
      this.tableData = tableData;
    },
    saveUser() {
      let records = this.$refs.xTable.getSelectRecords();
      this.addSelectedUsers(records);
      this.$emit("close");
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      this.getUserList(currentPage, pageSize);
    },
    getUserList(currentPage, pageSize) {
      this.loading = true;
      this.getUsers({ currentPage, pageSize })
        .then(response => {
          console.log("获取用户成功", response);
          let result = response.data.users;
          this.tablePage.totalResult = response.data.total;
          this.loadUsers(result);
          this.loading = false;
        })
        .catch(error => {
          console.error("获取用户异常", error);
          this.loading = false;
        });
    }
  },
  mounted() {
    let currentPage = this.tablePage.currentPage;
    let pageSize = this.tablePage.pageSize;
    this.getUserList(currentPage, pageSize);
  }
};
</script>
